<template>
    <div class="tableContent">
        <Table  class="resizable-table" @on-column-width-resize="(a,b,c,d)=>{onColumnWidthResize(a,b,c,d,this.customCacheKeySat)}"
               :columns="columns" :data="dataSource" border>
            <template slot-scope="{ row,index }" slot="action">
                <div class="ivu-table-cell-slot" v-if="!disabled">
                    <span class="operationBtn" v-if="row.operation ==='action'" @click="addItem">{{ $t('新增') }}</span>
                    <span v-if="row.operation !=='action' && row.status!=1" class="operationBtn"
                          @click="removeItem(index)">{{ $t('删除') }}</span>
                    <span v-if="row.operation !=='action' && !row.edit " class="operationBtn"
                          @click="editItem(index)">{{ row.edit ? $t('更新') : $t('编辑') }}</span>
                    <span v-if="row.operation !=='action' && row.edit " class="operationBtn"
                          @click="saveItem(index)">{{ $t('提交') }}</span>
                    <span v-if="row.operation !=='action' && row.edit " class="operationBtn"
                          @click="cancelSaveItem(index)">{{ $t('取消') }}</span>
                </div>
            </template>
            <template slot-scope="{ row,index }" slot="slot1">
                <Input maxlength="200" v-model.trim="dataSource[index].type" :placeholder="$t('请输入')"
                       v-if="row.operation !=='action'  && row.edit  && row.status!=1"/>
                <p class="breakSpaces" style="text-align: left" v-else>{{ dataSource[index].type }}</p>
            </template>
            <template slot-scope="{ row,index }" slot="slot2">
                <Input maxlength="200" v-model.trim="dataSource[index].demands" :placeholder="$t('请输入')"
                       v-if="row.operation !=='action'  && row.edit  && row.status!=1"/>
                <p class="breakSpaces" style="text-align: left" v-else>{{ dataSource[index].demands }}</p>
            </template>
            <template slot-scope="{ row,index }" slot="slot3">
                <Input maxlength="200" v-model.trim="dataSource[index].verify" :placeholder="$t('请输入')"
                       v-if="row.operation !=='action'  && row.edit"/>
                <p class="breakSpaces" style="text-align: left" v-else>{{ dataSource[index].verify }}</p>
            </template>
            <template slot-scope="{ row,index }" slot="slot4">
                <div v-if="row.operation !=='action'" style="text-align: left">
                    <i-Switch :disabled="disabled" true-value="1" false-value="0" v-model="dataSource[index].result"/>
                </div>
                <p class="breakSpaces" style="text-align: left" v-else>{{ dataSource[index].result }}</p>
            </template>
            <template slot-scope="{ row,index }" slot="slot6">
                <DatePicker transfer type="datetime" v-if="row.operation !=='action'  && row.edit"
                            v-model="dataSource[index].whenTime" :placeholder="$t('请选择')"></DatePicker>
                <p class="breakSpaces" style="text-align: left" v-else>{{dataSource[index].whenTime ? moment(dataSource[index].whenTime).format('YYYY-MM-DD HH:mm:ss') : "" }}</p>
            </template>
            <template slot-scope="{ row,index }" slot="who">
                <p class="breakSpaces" style="text-align: left" v-if="disabled">{{ dataSource[index].who }}</p>
            </template>
        </Table>
    </div>
</template>
<script>
const totalComlumns = {desc: "", amount: 0, operation: "action", id: ""}
import mixins from './mixins'
import moment from 'moment'

export default {
    name: "contractSignOffTab.vue",
    mixins: [mixins],
    props: ['disabled', 'list','type'],
    data() {
        return {
            active: "SAT",
            dataSource: [{...totalComlumns}],
            columns: [
                {
                    title: this.$t('类型'),
                    key: "type",
                    slot: "slot1",
                    resizable: true,tooltip: true,
                    width: 150,
                    renderHeader: (h) => {
                        return h('div', [
                            h('span', {
                                domProps: {
                                    innerHTML: this.$t('类型')
                                },
                                attrs: {
                                    class: "required "
                                }
                            }),
                        ])
                    }
                },
                {
                    title: this.$t('要求'),
                    key: "demands",
                    slot: "slot2",
                    resizable: true,tooltip: true,
                    width: 150,
                    renderHeader: (h) => {
                        return h('div', [
                            h('span', {
                                domProps: {
                                    innerHTML: this.$t('要求')
                                },
                                attrs: {
                                    class: "required "
                                }
                            }),
                        ])
                    }
                },
                {
                    title: this.$t('核实'),
                    key: "verify",
                    slot: "slot3",
                    resizable: true,tooltip: true,
                    renderHeader: (h) => {
                        return h('div', [
                            h('span', {
                                domProps: {
                                    innerHTML: this.$t('核实')
                                },
                                attrs: {
                                    class: "required "
                                }
                            }),
                        ])
                    }
                },
                {
                    title: this.$t('结果'),
                    key: "result",
                    slot: "slot4",
                    resizable: true,tooltip: true,
                },
                {
                    title: this.$t('责任人'),
                    key: "who",
                    resizable: true,tooltip: true,
                    slot:"who"
                },
                {
                    title: this.$t('当前时间'),
                    key: "whenTime",
                    slot: "slot6",
                    resizable: true,tooltip: true,
                    renderHeader: (h) => {
                        return h('div', [
                            h('span', {
                                domProps: {
                                    innerHTML: this.$t('当前时间')
                                },
                                attrs: {
                                    class: "required "
                                }
                            }),
                        ])
                    }
                },
                {
                    title: this.$t('操作'),
                    key: "Items",
                    slot: "action",
                    width: 250,
                    align: "center"
                }
            ],
            customCacheKeySat:""
        }
    },
    mounted() {
        this.customCacheKeySat = this.type

        this.getColumnWidth(this.columns, this.customCacheKeySat)

        this.dataSource = []
        if (Array.isArray(this.list) && this.list.length > 0) {
            const _list = this.list.map((item) => {
                item.indexCode = Math.random()
                if (item.isFirst !== 1)
                    item.edit = false
                return item;
            })
            this.dataSource = JSON.parse(JSON.stringify(_list))
        }

        if (!this.disabled)
            this.dataSource.push({...totalComlumns})
        this.copyDataSource = JSON.parse(JSON.stringify(this.dataSource))
    },
    methods: {
        moment,
        saveItem(index) {
            this.activeIndex = index
            if (!this.dataSource[this.activeIndex].type) {
                this.$Message.error(this.$t('请输入'))
                return;
            }
            if (!this.dataSource[this.activeIndex].demands) {
                this.$Message.error(this.$t('请输入'))
                return;
            }
            if (!this.dataSource[this.activeIndex].verify) {
                this.$Message.error(this.$t('请输入'))
                return;
            }
            if (!this.dataSource[this.activeIndex].whenTime) {
                this.$Message.error(this.$t('请输入'))
                return;
            }

            this.dataSource[this.activeIndex]['edit'] = false
            this.$forceUpdate()
        },
        cancelSaveItem(index) {
            const obj = this.copyDataSource.find(item => {
                if (this.dataSource[index].indexCode === item.indexCode)
                    return item
            })

            if (obj)
                this.dataSource.splice(index, 1, {...obj, edit: false})
            else
                this.dataSource.splice(index, 1)
            this.$forceUpdate()
        },
        checkEditStatus() {
            const obj = this.dataSource.find(item => item.edit)
            if (obj) {
                this.$Message.error(this.$t('请先保存'))
                return true
            } else {
                return false
            }
        },
        editItem(index) {
            if (this.checkEditStatus()) return false
            this.dataSource[index]['edit'] = true
            this.activeIndex = index
            this.copyDataSource = JSON.parse(JSON.stringify(this.dataSource))
            this.$forceUpdate()
        },
        addItem() {
            if (this.checkEditStatus()) return false
            const obj = {
                indexCode: Math.random(),
                edit: true,
                who: this.userName,
                type: "",
                demands: "",
                verify: "",
                result: 0,
                whenTime: "",
                status: 0
            }
            this.dataSource.splice(this.dataSource.length - 1, 0, obj)
        },
        removeItem(index) {
            this.dataSource.splice(index, 1)
        },
        getParams() {
            if (this.checkEditStatus()) return false
            let list = JSON.parse(JSON.stringify(this.dataSource))
            list.splice(list.length - 1, 1)
            list.forEach(item => {
                item.whenTime = moment(item.whenTime).format('YYYY-MM-DD HH:mm:ss')
            })
            return list;
        }
    }
}
</script>

